<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视图命名</title>
    <script src="../../vue.js"></script>
    <script src="../../vue-router.js"></script>

    <style>
        .foo,
        .bar {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            display: inline-block;
        }

        .foo {
            background-color: #999999;
            color: #ffffff;
        }

        .bar {
            background-color: #333333;
            color: #ffffff;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>我是标题</h1>
        <p>
            <router-link to="/foo">go tu foo</router-link>
        </p>
        <!--如果需要在同一个视图同时显示不同的组件，那么就需要用到
        视图命名来解决，否则会默认的显示name = default视图-->

        <router-view class="foo" name="foo"></router-view>
        <router-view class="bar" name="bar"></router-view>


    </div>
    <script>
        const Foo = {
            template: '<p>bar</p>'
        }
        const Bar = {
            template: '<p>foo</p>'
        }

        const router = new VueRouter({
            routes: [{
                path: '/foo',
                //需要注意的是 在这是components 而不是component 一个复数
                //一个单数
                components: {
                    foo: Foo,
                    bar: Bar
                }
            }]
        });
        const app = new Vue({

            router

        }).$mount('#app')
    </script>
</body>

</html>